<template>
    <a-tooltip>
        <template
            v-if="!disabled"
            #title>
            <slot name="title">
                {{ title }}
            </slot>
        </template>
        <div
            ref="ellipsisRef"
            :class="classComputed"
            :style="styleComputed"
            class="x-ellipsis">
            <slot></slot>
        </div>
    </a-tooltip>
</template>

<script setup>
import { computed, onMounted, ref, nextTick, onUpdated, useSlots } from 'vue'
import { isEmpty } from '@/utils'

defineOptions({
    name: 'XEllipsis',
})

const props = defineProps({
    title: { type: String },
    lineClamp: { type: Number },
})

const slots = useSlots()

const ellipsisRef = ref()
const disabled = ref(true)

const isLineClampComputed = computed(() => props.lineClamp > 1)
const classComputed = computed(() => {
    return {
        'x-ellipsis--line-clamp': isLineClampComputed.value,
    }
})
const styleComputed = computed(() => {
    const style = {}

    if (isLineClampComputed.value) {
        style['-webkit-line-clamp'] = props.lineClamp
    }

    return style
})
const showTooltipComputed = computed(() => !isEmpty(props.title) || !!slots.title)

onMounted(() => {
    initialize()
})

onUpdated(() => {
    initialize()
})

async function initialize() {
    await nextTick()
    if (!ellipsisRef.value) return
    const scrollHeight = ellipsisRef.value.scrollHeight
    const scrollWidth = ellipsisRef.value.scrollWidth
    const height = ellipsisRef.value.clientHeight
    const width = ellipsisRef.value.clientWidth

    if (!showTooltipComputed.value) {
        disabled.value = true
        return
    }

    disabled.value = scrollHeight <= height && scrollWidth <= width
}
</script>

<style lang="less" scoped>
.x-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;

    &:not(.x-ellipsis--line-clamp) {
        white-space: nowrap;
    }

    &--line-clamp {
        display: -webkit-box;
        line-break: anywhere;
        /* autoprefixer: ignore next */
        -webkit-box-orient: vertical;
    }
}
</style>
